<template>
  <div>
    <!-- -->
    <div class="center">

      <div class="left" :style="style1" @click="back"></div>
      <div class="center1">{{deviceInfo.devicename}}</div>
      <div class="right" @click="cancelDelete"><span v-show="editStatus">取消</span></div>
    </div>
    <div style="background: rgba(0, 0, 0,0.2);">
      <div class="main-body"  :style="{height: height + 'px'}">
        <div class="telecontroller-item" @touchstart="longTouchStart(index)" @touchend="longTouchEnd" @click="remoteClick(index,item, $event)"
             v-for="(item,index) in remoteList" :key="index">
          <div v-show="item.deleteFlag" @click.stop="remoteDelete(item)" class="t-e-div1"></div>
          <div class="div1"><img class="img-div" src="../assets/kongtiao1.png"></div>
          <div class="div2">{{item.extInfoValue.name}}</div>
        </div>
        <div class="tianjia" @click="remoteAdd">
          <img src="../assets/tianjia.png" alt="">
        </div>
      </div>
      <div class="details">
          <div class="div1" @click="details">
            <div class="divimg"><img src="../assets/details.png" alt=""></div>
            <div class="divp">详情</div>
          </div>
      </div>

      <div class="showwait" :style="styleHeight" v-if="showWait">
        <div style="background:rgba(0,0,0,0.5);height:100%;width:100%;z-index:1000">
          <div class="showdiv">
          </div>
        </div>
      </div>
    </div>
    <error-alert :show="showAlert" :errorText="errorText"></error-alert>
    <base-dialog-warn :dialogHeight="115" :showDialog="showDialog" @maskClick="showDialog = false"
                      @cancel="showDialog = false" @dialogConfirm="showDialog = false">
      <div style="color:black">删除成功</div>
    </base-dialog-warn>
  </div>
</template>
<script>
  import Vue from 'vue'
  import BaseHeader from "../components/BaseHeader.vue";
  import ErrorAlert from "../components/ErrorAlert.vue";
  import BaseDialogWarn from "../components/BaseDialogWarn.vue";
  import NativeUtil from "@/utils/NativeUtils";

  export default {
    components: {BaseHeader, ErrorAlert, BaseDialogWarn},
    data() {
      return {
        showWait:false,
        errorText: '发生错误',
        newextInfoId:'',
        deleteIndex:'',
        showDialog: false,
        showAlert: false,
        editStatus: false,

        styleHeight:{
          height: window.innerHeight+ 'px'
        },
        style1: {
          backgroundImage: 'url(' + require('../assets/back.png') + ')'
        },
        height: window.innerHeight - (472 * (window.innerWidth / 1080)),
        itemWidth: (window.innerWidth - 70) / 4,
        setTimeOutMinus: '',
        remoteList: [],
        deviceInfo: {},
        currentExtInfo:null,
        styleList: {
          7: {
            backgroundImage: 'url(../assets/kongtiao1.png)'
          }
        }
      }
    },
  
    watch:{
      editStatus:function(status){
        if(status){
          this.remoteList.forEach(val=>{
            val.deleteFlag = true
          })
        }else{
          this.remoteList.forEach(val=>{
            val.deleteFlag = false
          })
        }
      },
    },
    created() {
      window.native_callback_config = this.native_callback_config;
      window.native_callback_info = this.native_callback_info;
      window.native_callback_delete_config = this.native_callback_delete_config;
      window.native_callback_comm = this.native_callback_comm;
    },
    mounted() {
      NativeUtil.request_info(1)
      NativeUtil.request_config(1, 3)
    },
    
    methods: {
      back() {
        NativeUtil.request_button('4', '8', '9')
      },
      remoteClick(index,item){
        if (!this.editStatus) {
          let paramsData = {
             funcId: 'fetchRemoteDeivceByRid',
             data: {
                rid: item.extInfoValue.rid,
              }
          }
          this.currentExtInfo = item
          this.newextInfoId = item.extInfoId
          NativeUtil.request_comm('1', JSON.stringify(paramsData))
          //显示进度页。。。
          this.showWait = true;
        }
        
      },
      remoteAdd(){
        this.currentExtInfo = null
        this.$router.push({name: 'TelecontrollerType'})
      },
      remoteDelete(item) {
        NativeUtil.delete_config(1,item.extInfoValue.rid,this.deviceInfo.wifiid, this.deviceInfo.deviceid, item.extInfoId , 'infraredRC')
      },

      longTouchStart(index){
        clearTimeout(this.setTimeOutMinus);
        let _this = this;
        this.setTimeOutMinus = setTimeout(function(){
          this.deleteIndex = index
          _this.editStatus = true

        },1500)
      },
      longTouchEnd() {
        clearTimeout(this.setTimeOutMinus);
      },
      cancelDelete() {
        this.editStatus = false
      },
      //详情
      details(){
        NativeUtil.request_button(1,9,"details")
      },

     


    /**  =============================native回调方法======================== */

    // native_callback_(pid, errCode, param) {
    //     if (pid == 10086) { // resume刷新
    //       return '1';
    //     }
    //     if (errCode == 0) {
    //       this.deviceInfo = JSON.parse(param);
    //     }
    // },


      //native回调方法：获取设备信息
      native_callback_info(pid, errCode, param) {
        if (pid == 10086) { // resume刷新
          return '1';
        }
        if (errCode == 0) {
          this.deviceInfo = JSON.parse(param);
        }
      },
      //native回调方法：获取遥控器列表
      native_callback_config(pid, errCode, jsonStr) {
        if (errCode == 0) {
          let config = JSON.parse(jsonStr)
          this.remoteList = JSON.parse(config.response.extInfo.infraredRC)
          this.remoteList.forEach((val, index) => {
            val.deleteFlag = false
          })
          this.remoteList.forEach((val, index) => {
            val.isClick = false
          })
          this.remoteList.forEach((val, index) => {
            val.extInfoValue = JSON.parse(val.extInfoValue)
          })
        }
      },
      //native回调方法： 删除遥控器
      native_callback_delete_config(pid, errCode, param) {
        let self =this
        if (errCode == 0) {
          this.showDialog = true
          this.remoteList.splice(this.deleteIndex,1)
        } else {
          this.errorText = param
          this.showAlert = true
          setTimeout(function () {
            self.showAlert = true
          }, 1500)
        }
      },
      //native回调方法： comm方法
      native_callback_comm(pid, paramsData) {
        let params = JSON.parse(paramsData)
        let funcId = params.funcId
        let errorCode = params.errorCode
        // alert("成功，页面跳转，extinfoid："+paramsData)
        // alert(errorCode)
        if (funcId === 'fetchRemoteDeivceByRid' && errorCode == 0) {
          Vue.prototype.extInfo = this.currentExtInfo
          this.showWait = false
          this.$router.push({name: 'TelecontrollerSetting'})
          
        }
      },
    }
  }
</script>
<style scoped>
.showwait{
    background:url(../assets/backgroundImg.png)no-repeat;
    background-size:100% 100%;
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
}
   .showwait .showdiv{
        position: absolute;
        top: 8.3rem;
        left: 1rem;
        width: 8.82rem;
        height: 1.36rem;
        margin: 0 auto;
       background:url(../assets/background-center.png)no-repeat;
       background-size:100% 100%;

}




.center{
    height:0.66rem;
    padding:1.07rem 0.3rem 0.5rem 0.3rem;
    background: url(../assets/changxixian.png) no-repeat 0 2.2rem;
    background-size: 100% 1px;
    display: flex;
    justify-content: space-between;

  }

  .center .left {
    width: 0.6rem;
    height: 0.66rem;
    background-size: 100% 100%;
  }

  .center .center1 {
    height: 0.66rem;
    font-size: 0.55rem;
    color: #fff;
    text-align: center;
    line-height: 0.66rem;

  }

  .center .right {
    height: 0.66rem;
    font-size: 0.55rem;
    color: #fff;
    text-align: right;
    line-height: 0.66rem;

  }

  .main-body {
    display: block;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    border-radius: 20px;
    /* align-content: flex-start; */
    padding: 0.6rem 0.38rem 0 0.38rem;
  }

  .tianjia {
    width: 2.4rem;
    height: 2.4rem;
    float: left;
    /* border: 1px solid red; */
  }

  .tianjia img {
    width: 100%;
    height: 100%;
    display: block;
    float: left;
    border-radius: 20px;
  }

  .telecontroller-item {
    /* border:1px solid red; */
    width: 2.41rem;
    height: 2.42rem;
    display: block;
    position: relative;
    text-align: center;
    font-size: 0.28rem;
    color: #02606a;
    background-color: #93d9e1;
    border-radius: 20px;
    margin-right: 0.10rem;
    margin-bottom: 0.6rem;
    float: left;
  }

  .telecontroller-item .div1 {

    width: 2.41rem;
    height: 1.76rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .telecontroller-item .div1 img {
    width: 100%;
    height: 100%;
    display: block;
    float: left;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .telecontroller-item .div2 {
    font-size: 0.28rem;
    color: #02606a;
    width: 2.41rem;
    height: 0.66rem;
    text-align: center;
    line-height: 0.66rem;
    -webkit-touch-callout: none; /*系统默认----------菜单被禁用*/
    -webkit-user-select: none; /*webkit浏览器*/
    -khtml-user-select: none; /*早期浏览器*/
    -moz-user-select: none; /*火狐*/
    -ms-user-select: none; /*IE10*/
    user-select: none;
  }

  .img-div {
    -webkit-touch-callout: none; /*系统默认菜单被禁用*/
    -webkit-user-select: none; /*webkit浏览器*/
    -khtml-user-select: none; /*早期浏览器*/
    -moz-user-select: none; /*火狐*/
    -ms-user-select: none; /*IE10*/
    user-select: none;
  }

  .telecontroller-item .t-e-div1 {
    width: 0.62rem;
    height: 0.62rem;
    background: url(../assets/jianhao.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    border-radius: 0.62rem;
    right: -5px;
    top: -5px;
    z-index: 10;
  }

  .telecontroller-item.last {
    margin-right: 0;
  }

   .details{
    height: 1.9rem;
    width: 100%;
    background: url('../assets/detailsBg.png')no-repeat;
    background-size:100% 100%; 
    
  }
  .details .div1{
    width: 1.68rem;
    
    padding: 0.35rem 0.2rem 0 0.2rem;
    margin: 0 auto;

  }
    .details .div1 .divimg{
      width: 0.68rem;
      height: 0.68rem;
      margin:  0 auto;
    }
    .details .div1 .divp{
      width: 1.68rem;
      height: auto;

      font-size: 0.36rem;
      color: #fff;
      text-align: center;
      margin: 0.18rem auto 0 auto;
      
      
    }
    .details .div1 .divimg img{
      width: 100% ;
      height: 100%;
      display: block;
      float: left;
    }

</style>
